import axios from 'axios'
import store from '@/store'
import router from '@/router'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // axios 请求的完整地址 baseURL+url
  // 知识点: 请求的路径问题
  // axios/script标签src/img标签的src/link的href. 都会发起一次请求
  // 如果是./开头的地址, 找当前文件夹
  // 如果是http开头的地址, 找到外链外部服务器(链接网络)
  // 如果是/开头的地址, 忽略文件夹, 直接找当前运行时, 所在服务器
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 知识点: js文件中能否使用this.$store?
    // 不能, 因为这个this关键字不是Vue组件对象, 无法查找原型链上$store
    // 但是this.$store为了拿到的是store/index.js导出store对象
    // 解决: 我们直接把store对象导入过来使用, 是同一个store对象
    const token = store.getters.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
// 知识点1: axios内部的处理机制
// (1): http状态码为2xx, 3xx, 就会给Promise对象位置, 返回成功的结果(resolve())
// (2): http状态码为4xx, 5xx, 就会给Promise对象位置, 返回错误的结果(reject())
// 如果你想做一些操作, 你可以在axios的响应拦截器, 自己来处理返回的结果
// 补充: http状态码, 由本次请求后, 后端进行设置返回的
service.interceptors.response.use(
  response => { // http 为2xx ,3xx进入这里
    const { success, message } = response.data
    if (success === false) { // 失败
      return Promise.reject(new Error(message))
    } else { // 成功
      return response.data
    }
  },
  error => { // http 为4xx ,5xx进入这里
    if (error.response.data.code === 10002) {
      store.commit('user/RESET_STATE')
      store.commit('user/REMOVE_TOKEN')
      router.replace('/login')
    }
    // console.log(error)
    return Promise.reject(error)
  }
)

export default service
